<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最小React测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .status {
            padding: 15px;
            margin: 10px 0;
            border-radius: 8px;
            font-weight: 500;
        }
        .success { background: #f6ffed; border: 1px solid #b7eb8f; color: #52c41a; }
        .error { background: #fff2f0; border: 1px solid #ffccc7; color: #ff4d4f; }
        .warning { background: #fffbe6; border: 1px solid #ffe58f; color: #faad14; }
        .info { background: #f0f5ff; border: 1px solid #adc6ff; color: #1890ff; }
        #react-root { margin-top: 20px; min-height: 100px; }
        .log { background: #f5f5f5; padding: 15px; border-radius: 6px; margin: 10px 0; font-family: monospace; font-size: 12px; max-height: 200px; overflow-y: auto; }
        button { background: #1890ff; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; margin: 5px; }
        button:hover { background: #40a9ff; }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔬 最小React测试</h1>
        
        <div class="info">这个页面将测试最基础的React功能，不依赖路由或复杂组件。</div>
        
        <div id="test-status"></div>
        
        <div id="react-root">
            <div class="warning">正在加载React组件...</div>
        </div>
        
        <div class="log" id="log-output"></div>
        
        <button onclick="runTest()">重新运行测试</button>
        <button onclick="clearLog()">清空日志</button>
        <button onclick="window.location.href='/'">返回主应用</button>
    </div>

    <!-- 使用项目的React构建 -->
    <script type="module">
        let logContainer = document.getElementById('log-output');
        let statusContainer = document.getElementById('test-status');
        
        function log(message, type = 'info') {
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `[${timestamp}] ${message}`;
            logContainer.appendChild(logEntry);
            logContainer.scrollTop = logContainer.scrollHeight;
            console.log(`[Minimal Test] ${message}`);
        }
        
        function showStatus(message, type) {
            const status = document.createElement('div');
            status.className = `status ${type}`;
            status.innerHTML = message;
            statusContainer.appendChild(status);
        }
        
        function clearLog() {
            logContainer.innerHTML = '';
            statusContainer.innerHTML = '';
        }
        
        window.clearLog = clearLog;
        
        async function runTest() {
            log('开始最小React测试...');
            clearLog();
            
            try {
                // 测试ES6模块导入
                log('测试ES6模块导入...');
                const { StrictMode, createElement, useState } = await import('react');
                const { createRoot } = await import('react-dom/client');
                
                log('React模块导入成功');
                showStatus('✅ React模块导入成功', 'success');
                
                // 创建最简单的组件
                function TestComponent() {
                    const [count, setCount] = useState(0);
                    
                    return createElement('div', {
                        style: {
                            padding: '20px',
                            background: '#f0f5ff',
                            borderRadius: '8px',
                            textAlign: 'center'
                        }
                    },
                        createElement('h3', { 
                            style: { color: '#1890ff', margin: '0 0 15px 0' } 
                        }, '🎉 React组件渲染成功！'),
                        createElement('p', null, `当前计数: ${count}`),
                        createElement('button', {
                            onClick: () => {
                                setCount(count + 1);
                                log(`计数更新: ${count + 1}`);
                            },
                            style: {
                                background: '#1890ff',
                                color: 'white',
                                border: 'none',
                                padding: '8px 16px',
                                borderRadius: '4px',
                                cursor: 'pointer',
                                margin: '0 5px'
                            }
                        }, '增加计数'),
                        createElement('button', {
                            onClick: () => {
                                log('React事件处理正常');
                                alert('React组件事件处理成功！');
                            },
                            style: {
                                background: '#52c41a',
                                color: 'white',
                                border: 'none',
                                padding: '8px 16px',
                                borderRadius: '4px',
                                cursor: 'pointer',
                                margin: '0 5px'
                            }
                        }, '测试事件')
                    );
                }
                
                // 渲染组件
                const container = document.getElementById('react-root');
                const root = createRoot(container);
                
                log('创建React根节点...');
                
                root.render(createElement(StrictMode, null, createElement(TestComponent)));
                
                log('React组件渲染完成');
                showStatus('✅ React组件渲染成功', 'success');
                
            } catch (error) {
                log(`测试失败: ${error.message}`);
                log(`错误堆栈: ${error.stack}`);
                showStatus(`❌ 测试失败: ${error.message}`, 'error');
            }
        }
        
        window.runTest = runTest;
        
        // 页面加载后自动运行测试
        window.addEventListener('load', () => {
            log('页面加载完成，开始自动测试...');
            setTimeout(runTest, 500);
        });
        
        // 捕获全局错误
        window.addEventListener('error', (event) => {
            log(`全局错误: ${event.error?.message || event.message}`);
            showStatus(`❌ 全局错误: ${event.error?.message || event.message}`, 'error');
        });
        
        window.addEventListener('unhandledrejection', (event) => {
            log(`Promise拒绝: ${event.reason}`);
            showStatus(`❌ Promise错误: ${event.reason}`, 'error');
        });
    </script>
</body>
</html>